<template>
  <div class="box">
    <el-progress class="progress" :percentage="percentage" color="rgb(202 255 227)">
      
    </el-progress>
    <div class="color">       {{ message }}</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ElAlert, ElProgress,ElMessage  } from "element-plus";
const props = defineProps({
    message:{
        type: String,
        default: ''
    },
    percentage: {
        type: Number,
        default: 0
    }
})
</script>
<style lang="less" scoped>
    .box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        width: 80%;
        height: 80px;
        background: #477577;
        position: fixed;
        top:120px;
        left: 50%;
        color: #000000;
        transform: translateX(-50%);
        box-shadow:0px 0px 12px rgba(0, 0, 0, .52);
        border-radius: 12px;
        z-index: 999;
    }
    .color {
        color: #ffffff;
    }
    .progress {
        width: 100%;
    }
    :deep(.el-progress__text) {
        color: #ffffff;
    }
</style>